<template>
  <div class="tpl12-nav">
    <section class="mobile12_content">
      <section class="mobile12_contentnav">
        <ul>
          <li
            v-for="(item, index) in tplItemData" class="colblue" :key="index"
            :style="`background-color:${item.bgColor}`">
            <a @click="openLink(item.link)">
              <img :src="item.pic" class="lazyload" width="35" height="35">
              <b>{{ item.showtitle }}</b>
            </a>
          </li>
        </ul>
      </section>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: [Object, Array] // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  }
})
</script>

<style lang="scss">
.tpl12-nav{
  .mobile12_content{
    overflow: hidden;
  }
  .mobile12_contentnav{
    margin-top: 2%;
    overflow: hidden;
    width: 100%;
  }
  
  .mobile12_contentnav ul li{
    float: left;
    width: 49%;
    margin:0 1%;
    margin-bottom: 2%;
    padding-bottom: 12%;
    text-align: center;
    border-radius: 20px;
  }
  .mobile12_contentnav ul li a{
    display: block;
  }
  .mobile12_contentnav ul li:nth-child(odd){
    margin-left: 0px;
  }
  .mobile12_contentnav ul li:nth-child(even){
    margin-right: 0px;
  }
  .mobile12_contentnav ul li:nth-child(1){
    background: #ff9292;
  }
  .mobile12_contentnav ul li:nth-child(2){
    background: #92c0ff;
  }
  .mobile12_contentnav ul li:nth-child(3){
    background: #b392ff;
  }
  .mobile12_contentnav ul li:nth-child(4){
    background: #ff92a5;
  }
  .mobile12_contentnav ul li img{
    margin-top: 25%;
  }
  .mobile12_contentnav ul li b{
    display: block;
    margin-top: 32px;
    color: #fff;
    font-size: 32px;
    font-weight: normal;
  }
}
</style>
